<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>thumb</title>

<link rel="stylesheet" href="../styles/uigg.css">

<script src="../js/jquery.min.js"></script>
<script src="../js/uigg.js"></script>
</head>

<body center>

<style>
    tab {width: 600px;max-width: 100%;text-transform: capitalize;}
    tab-list {line-height: 50px;background: var(--color);}
    tab-list li a {color: white;}
    tab-list li.active a {background: var(--fff-1);}
    tab-group {background: var(--f7);padding: 20px;}
</style>

<!----------------------------------------------------------------------------------------->

<tab>
    <tab-list>
        <li class="active"><a>one</a></li>
        <li><a>two</a></li>
        <li><a>three</a></li>
    </tab-list>
    <tab-cont>
        <tab-group class="active">
            <tab>
                <tab-list>
                    <li class="active"><a>one</a></li>
                    <li><a>two</a></li>
                    <li><a>three</a></li>
                </tab-list>
                <tab-cont>
                    <tab-group class="active">one</tab-group>
                    <tab-group>two</tab-group>
                    <tab-group>three</tab-group>
                </tab-cont>
            </tab>
        </tab-group>
        <tab-group>two</tab-group>
        <tab-group>three</tab-group>
    </tab-cont>
</tab>

<!----------------------------------------------------------------------------------------->

</body>
</html>